<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 父组件 有自己的count, 可以更改 -->
        <p>{{count}}</p>
        <button @click="count++">count++</button>

        <hr>

        <!-- 父组件将自己的count数据,对应属性名count传入到子组件, 给子组件绑定自定义事件,事件触发时执行传入的函数(函数是一个特殊的对象 -> 子组件触发自定义事件时,执行的函数依旧是传入的函数 ) -->
        <comp-a :count="count" @update:count="updateCountHanlder"></comp-a>
    </div>
</body>

<script>
    // 组件封装注意:
    // 1. data选项, 要求是返回对象的函数 => 每个组件中的数据都是独立的
    // 2. 单个根元素(Vue2)     => Vue3可以有多个同级元素
    // 3. 单项数据流   =>  父组件给子组件传入的数据,子组件不能直接修改(被props接收的属性,子组件都不能直接改)  => 直接修改会报错

    // 父组件传入的数据如果子组件想修改的 -> 只能间接改?
    // 1. 将父组件传入的值作为子组件的初始值(data), 在子组件初始化时执行一次 
    // 2. 根据父组件传入的值得到新值=> 计算属性

    // 子父通信:
    // 子组件如何能修改父组件传入的数据?  => 需要父组件帮助 =>  

    // 父组件要做什么?
    // 1. 父组件将自己的数据, 对应属性名传入到子组件, 
    // 2. 给子组件绑定自定义事件, 事件触发时执行传入的函数(函数是一个特殊的对象 -> 子组件触发自定义事件时, 执行的函数依旧是传入的函数)

    // 子组件要做什么?
    // 1. 对应自定义事件名接收事件   (Vue2 emits可以省略1)
    // 2. 也可以通过组件实例的 $listeners  _event 来查看,父组件传入的自定义事件


    let CompA = {
        props: ["count"],  // this.count
        // emits: ["abc"], //  对应自定义事件名接收事件 
        data() {
            return {

            }
        },
        // 点击时触发父组件传入的自定义事件
        template: `<div class="comp-a">
            <p>{{count}}</p>
            <p><button @click="$emit('update:count',count+1)">count++</button></p>
        </div>`,
        mounted() {
            console.log("子组件实例", this);
        },
    }

    var app = new Vue({
        el: "#app",
        data: {
            count: 1,
        },
        methods: {
            updateCountHanlder(v) {
                this.count = v;
            }
        },
        components: {
            CompA,
        },

    })

</script>

</html>